<template>
  <div class="card">
    <van-nav-bar title="电子工牌" left-arrow @click-left="$router.go(-1)"/>
    <div class="head-title">
        <h1 style="color:rgb(181, 39, 39)">BONC</h1>
        <h2>东方国信</h2>
    </div>
    <van-image round width="10rem" height="10rem" :src="userInfo.pic"/>
    <h2>{{userInfo.name}}</h2>
    <h2>{{userInfo.jobNumber}}</h2>
    <div class="bottom-box">
        <h4>{{currentDate}}</h4>
        <h4>{{currentTime}}</h4>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'WorkCard',
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  },
  mounted () {
    const _this = this
    this.timer = setInterval(() => {
      const d = new Date()
      _this.currentTime = d.toLocaleTimeString()
    })
  },
  created () {},
  beforeDestroy () {
    if (this.currentTime) {
      clearInterval(this.timer) // 清除定时器
    }
  },
  data () {
    return {
      currentTime: '',
      currentDate: new Date().toLocaleDateString()
    }
  }
}
</script>
<style lang="less" scoped>
.card{
    background-color: #fff;
    width: 100%;
    height:100vh;
    position: relative;
}
.head-title{
    margin-top: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bottom-box{
    position:absolute;
    bottom:10%;
    left:40%;
}
</style>
